import { Table, Button, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { bannerList, deleteBanner, addBanner } from "../../http/request";
import { DeleteFilled, PlusCircleOutlined } from '@ant-design/icons';
import TanChuang from "../tanchuang/bannerTan";
import store from "../../store";


const App = () => {
    //响应式数据
    const [state, setState] = useState([])
    useEffect(() => {
        bannerList().then(res => {
            // console.log(res);
            setState(() => {
                return res.data.data
            })
        })
    }, [])
    //添加轮播图
    const addbanner = () => {
        store.dispatch({
            type: "open",
            data: true
        })
    }

    //删除轮播图
    const deleteBan = (id) => {
        deleteBanner(id).then((res) => {
            const { code } = res.data
            if (code == "200") {
                message.success("删除成功")
                window.location.reload()
            } else {
                message.error("删除失败")
            }
        })

    }
    //数据规则
    const columns = [
        {

            title: '序号',
            render: (text, item, index) => <span>{index + 1}</span>

        },
        {
            title: '轮播图展示',
            dataIndex: 'img',
            // key: "bannerid",
            render: (text, item) => <img src={text} alt={item.alt} style={{ width: "200px", height: "100px" }} />
        },
        {
            title: '提示信息',
            dataIndex: 'alt',
        },
        {
            title: '链接展示',
            dataIndex: 'link',
        },
        {
            title: '操作',
            render: (text, item) => <Button type="primary" shape="circle" icon={< DeleteFilled />} size={'default'} onClick={() => { deleteBan(item.bannerid) }} />
        }
    ];

    return (
        <div>
            <TanChuang></TanChuang>
            <Button type="primary" shape="round" icon={<PlusCircleOutlined />} size={'default'} style={{ marginBottom: "10px" }} onClick={(e) => { addbanner(e) }}>
                添加
            </Button>
            <Table columns={columns} pagination={{ position: ["bottomCenter"], pageSize: 3 }} dataSource={state} rowKey={record => record.bannerid} />
        </div>

    )
};

export default App;